<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ol3-layers-witcher</title>
  <link rel="stylesheet" href="./css/ol.css" type="text/css">
  <link rel="stylesheet" href="./css/common.css" type="text/css">
  <link rel="stylesheet" href="./css/ol3-layerswitcher.css" type="text/css">
  <script type="text/javascript" src="./js/ol.js"></script>
  <script type="text/javascript" src="./js/ol3-layerswitcher.js"></script>
</head>
<body>
	<div id="map" ></div>

	<script type="text/javascript">

	var TDTRoadLayer = new ol.layer.Tile({
		title: "天地图路网",
		source: new ol.source.XYZ({
			url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
		})
	});

	var TDTAnnotationLayer = new ol.layer.Tile({
		title: "天地图文字标注",
		source: new ol.source.XYZ({
			url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
		})
	});

	var map = new ol.Map({
		target: 'map',
		layers: [
			TDTRoadLayer,
			TDTAnnotationLayer
		],
		view: new ol.View({
			center:  [11468382.41282299,3502038.887913635],
			zoom: 11
		})
	});

	// 添加图层切换控件
	var layerSwitcher = new ol.control.LayerSwitcher({
		tipLabel: '切换图层'
	});
	map.addControl(layerSwitcher);

	</script>
</body>
</html>
